import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { statisticGroupDefaultProps } from './defaultProps';
import type { StatisticGroupOptions } from './type';
import numberToWord from '../_util/numberToWord';

export interface StatisticGroupProps extends StatisticGroupOptions, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {}

const StatisticGroup: FC<StatisticGroupProps> = (props) => {
  const {
    className,
    horizontal,
    stackable,
    widths,
    inverted,
    color,
    size,
    children,
    forwardedRef,
    ...statisticGroupProps
  } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames(
        'ui',
        { horizontal, stackable, inverted },
        color,
        size,
        numberToWord(widths),
        'statistics',
        className,
      ),
      ...statisticGroupProps,
    },
    children,
  );
};

StatisticGroup.displayName = 'StatisticGroup';
StatisticGroup.defaultProps = statisticGroupDefaultProps;

export default StatisticGroup;
